<template>
  <el-row>
    <el-col :span="3">Pods</el-col>
    <el-col :span="3">{{ filterTableData.length }} Items</el-col>
    <el-col :span="6">
      <NamespaceDropDown ref="namespaceDropdown"></NamespaceDropDown>
    </el-col>
    <el-col :span="6">
      <el-input
        v-model="queryString"
        placeholder="查询内容"
        name="queryString"
        clearable
        @keyup.enter.native="queryPods"
      ></el-input>
    </el-col>
    <el-col :span="2"><el-button @click.native="exportReport" >export</el-button></el-col>
  </el-row>
  <el-row>
    <el-table
      :data="filterTableData"
      border
      style="width: 100%"
      max-height="550px"
      v-loading="loading"
    >
      <el-table-column prop="metadata.name" label="name" width="150" sortable>
        <template #default="scope">
          <a
            style="cursor: pointer; color: red"
            @click.native="openPod(scope.row, 'Pod')"
            >{{ scope.row.metadata.name }}</a
          >
        </template>
      </el-table-column>
      <el-table-column prop="metadata.namespace" label="namespace" width="150" sortable />
      <el-table-column
        prop="status.containerStatuses.length"
        label="containers"
        width="100"
        sortable
      />

      <el-table-column
        prop="status.containerStatuses[0].restartCount"
        label="restarts"
        width="80"
        sortable
      />
      <el-table-column prop="spec.nodeName" label="node" width="80" sortable />

      <el-table-column label="controller" width="120">
        <template #default="scope">{{ to_controllers(scope.row) }}</template>
      </el-table-column>
      <el-table-column label="age" width="120" sortable prop="metadata.creationTimestamp">
        <template #default="scope">{{
          to_age(scope.row.metadata.creationTimestamp)
        }}</template>
      </el-table-column>
      <el-table-column label="use.cpu" prop="use_cpu" width="120" sortable></el-table-column>
      <el-table-column label="use.memory(G)" prop="use_memory" width="120" sortable></el-table-column>
      <el-table-column label="requests.cpu" width="120" >
        <template #default="scope">{{ to_request_cpu(scope.row) }}</template>
      </el-table-column>
      <el-table-column label="limits.cpu" width="120" >
        <template #default="scope">{{ to_limit_cpu(scope.row) }}</template>
      </el-table-column>


      <el-table-column label="requests.memory(G)" width="120" >
        <template #default="scope">{{ to_request_memory(scope.row) }}</template>
      </el-table-column>
      <el-table-column label="limits.memory(G)" width="120" >
        <template #default="scope">{{ to_limit_memory(scope.row) }}</template>
      </el-table-column>


      <el-table-column prop="status.phase" label="status" width="80" sortable />
    </el-table>
  </el-row>

  <div class="mydialog">
    <el-dialog v-model="yamlVisible" :fullscreen="true">
      <el-tabs type="border-card">
        <el-tab-pane label="Yaml">
          <YamlEdit ref="yamlEdit"></YamlEdit>
        </el-tab-pane>
        <el-tab-pane label="Log">
          <PodLog ref="podLog"></PodLog>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script>
import { ref, nextTick } from "vue";
import { TableMixins } from "@/mixins/TableMixins";
import NamespaceDropDown from "@/components/k8s/NamespaceDropDown.vue";
//日志
import PodLog from "@/components/k8s/workload/PodLog.vue";
import emitter from "@/eventbus";
export default {
  name: "PodList",
  props: {},
  mixins: [TableMixins],
  components: { NamespaceDropDown, PodLog },
  data() {
    return {
      tableData: [],
      loading: false,
      namespaces: [],
      queryString: "",
      yamlVisible: false,
      podStates: null,
    };
  },
  mounted() {
    this.queryPods();
    emitter.on("query_namespaces", (newValue) => {
      this.namespaces = newValue;
    });
  },
  computed: {
    filterTableData() {
      var ret= this.tableData
        .filter(
          (t) =>
            this.namespaces.length == 0 || this.namespaces.includes(t.metadata.namespace)
        )
        .filter((t) => t.metadata.name.includes(this.queryString));
        if(this.podStates){
      ret=ret.map(t=> {
         let m = this.podStates[ t.metadata.namespace +"|"+t.metadata.name]
         if(m){
         let containers =m.containers ;

         var use_cpu =0.0
         var use_memory =0.0
         containers.forEach((container) => {
            if (container.usage && container.usage.cpu) {
              use_cpu =
                use_cpu +
                Number(this.to_cpu_h(container.usage.cpu));
            }
            if (container.usage && container.usage.memory) {
             use_memory =
                use_memory +
                Number(this.to_memory_g(container.usage.memory));
            }
          });

          t.use_cpu=use_cpu
          t.use_memory =use_memory
            
         }
         return t;
      })
        }


      return ret ;
    },
  },
  methods: {
     queryPods() {
      this.loading = true;
      window.k8s_GetPods("").then((response) => {
        this.loading = false;
        this.tableData = response.items;
      });
      window.k8s_GetPodMetrics().then((response) => {
        console.log(response)
        this.podStates = response;
      });

      
    },
    async exportReport(){

      await window.k8s_ExportPodReports()
    },
    to_controllers(pod) {
      let ownerReferences = pod.metadata.ownerReferences;
      if (!ownerReferences) return "";

      if (ownerReferences && ownerReferences.length > 0) {
        for (var i = 0, s = ownerReferences.length; i < s; i++) {
          if (ownerReferences[i].controller === true) {
            return ownerReferences[i].kind + ":" + ownerReferences[i].name;
          }
        }
      }
    },
    async openPod(row, kind) {
      this.yamlVisible = true;

      await nextTick();
      this.$refs.yamlEdit.loadYaml(kind, row.metadata.namespace, row.metadata.name);

      this.$refs.podLog.setMeta(row);
      this.$refs.podLog.loadLog();
    },
    to_request_cpu(row) {
      var c = 0;
      row.spec.containers.forEach((container) => {
        if (container.resources && container.resources.requests) {
          c = c + Number(this.to_cpu_h(container.resources.requests.cpu));
        }
      });
      return c;
    },
    to_limit_cpu(row) {
      var c = 0;
      row.spec.containers.forEach((container) => {
        if (container.resources && container.resources.limits) {
          c = c + Number(this.to_cpu_h(container.resources.limits.cpu));
        }
      });
      return c;
    },
    to_request_memory(row) {
      var c = 0;
      row.spec.containers.forEach((container) => {
        if (container.resources && container.resources.requests) {
          c = c + Number(this.to_memory_g(container.resources.requests.memory));
        }
      });
      return c;
    },
    to_limit_memory(row) {
      var c = 0;
      row.spec.containers.forEach((container) => {
        if (container.resources && container.resources.limits) {
          c = c + Number(this.to_memory_g(container.resources.limits.memory));
        }
      });
      return c;
    },
  },
};
</script>
<style scoped>
/*弹出框高度样式调整*/
.mydialog :deep() .el-dialog__body {
  overflow: auto;
  height: 80vh;
}

.mydialog :deep() .el-tabs--border-card {
  height: 70vh;
}
.mydialog :deep() .el-tabs__content {
  height: 70vh;
}
.mydialog :deep() .el-tabs__content .el-tab-pane {
  height: 70vh;
}
</style>
